<!-- 新闻 详情 -->
<template>
	<view class="container">
		
		<cu-custom bgColor="bg-gradual-them" :isBack="true">
			<block slot="backText">返回</block>
			<block slot="content">公告详情</block>
		</cu-custom>
		
		<view style="background-color: #FFFFFF;padding: 30rpx 30rpx 30rpx 30rpx;">
			
			<view class="titleBox text-xl text-black text-bold">{{title}}</view>

<!-- 			<view class="timeBox  text-gray margin-top-sm margin-bottom-sm">{{date}}</view>
			<view class="timeBox text-df text-gray margin-top-sm margin-bottom-sm">{{label}}</view> -->
			

				<view class="myflex_1" style="height: 70rpx;" >
								  
								  <!-- 领养标签 -->
				                <view v-if="label == '领养' "
				                  class="tn-bg-red--light tn-color-red justify-content-item tn-tag-content__item tn-margin-right tn-round tn-text-sm tn-text-bold" 
								  >
				                  <text class="tn-tag-content__item--prefix">#</text> {{ label }}
				                </view>
								
								<!-- 救助标签 -->
								<view v-if="label == '救助' "
								  class="tn-bg-purplered--light tn-color-purplered justify-content-item tn-tag-content__item tn-margin-right tn-round tn-text-sm tn-text-bold" 
								  >
								  <text class="tn-tag-content__item--prefix">#</text> {{ label }}
								</view>
								
								<!-- 其他标签 -->
								<view v-if="label == '其他' "
								  class="tn-bg-blue--light tn-color-blue justify-content-item tn-tag-content__item tn-margin-right tn-round tn-text-sm tn-text-bold" 
								  >
								  <text class="tn-tag-content__item--prefix">#</text> {{ label }}
								</view>
								
								
				                <view 
								class="justify-content-item tn-color-gray tn-text-center tn-color-black" 
								style="padding-top: 5rpx;">
				                  <text class="tn-icon-time tn-padding-right-xs"></text>
				                  <text class="tn-padding-right">{{ createTime }}</text>
				                </view>
				</view>
			
			<!-- 主图 -->
			<image style="height: 100%;"
			mode="widthFix" :src="photo"></image>

			<!-- 中间文章区域 -->
			<view 
			class="contentBox text-lg text-black margin-top-sm margin-tb-lg">
				<view class="mybody">
					<text>{{body}}</text>
				</view>
			</view>
			
			<!-- 多个图片显示 -->
			<view class=" " style="background-color: #f7f7f9;margin-top: 10rpx;">
				<view class="myflex_2" >
					<view class=""
					style="padding-left: 20rpx; z-index: 1000;padding-top: 20rpx;" v-for="(item, index) in img" :key="index" >
						<u-image 
						@click="clickImgAll(index)"
						:src="item"
						:lazy-load="true" shape="square"
						width="200rpx" height="200rpx"
						:fade="true" duration="450"
						mode="aspectFill">
							<view slot="error" style="font-size: 15rpx;">加载失败</view>
						</u-image>
					</view>	
					
				</view>
			</view>
			
			<view class="safe-bottom"></view>
			
		</view>

		
	</view>
</template>

<script>
	import request from '@/common/request.js';
	export default {
		data() {
			return {	
				
				id: 1,
				// photo: 'https://tnuiimage.tnkjapp.com/blogger/avatar_1.jpeg',
				photo: '',
				
				title: '猫咪图鉴',
				label: '领养',
				
				body: `这里是猫猫公告区`,
				
				// 多种图片
				img:[],
				// img:[
				// 	'https://tnuiimage.tnkjapp.com/blogger/avatar_1.jpeg',
				// 	'https://tnuiimage.tnkjapp.com/blogger/avatar_2.jpeg',
				// 	'https://tnuiimage.tnkjapp.com/blogger/avatar_3.jpeg',
				// 	'https://tnuiimage.tnkjapp.com/blogger/avatar_4.jpeg',
				// 	], 
					
				createTime: '2021年12月20日',
				
				noticeId: 0,
				
				content:[],
			}
		},
		onLoad(option) {
			this.noticeId = option.id              // string类型
			console.log("公告id：", this.noticeId)
			
			this.getNotices()  // 获取公告
		},
		methods: {
			
			// 点击图片放大预览
			clickImgAll(index) {
				wx.previewImage({
					current: this.img[index],                // 当前显示图片的http链接，默认是第一个
					urls: this.img, //需要预览的图片http链接列表，多张的时候，url直接写在后面就行了
				})
			},
			
			// 获取公告
			getNotices(){
				this.$u.api.getNotices({}).then(res=>{
					console.log("公告信息：",res)
					
					if(res.code == 200){
						// TODO 数据填充
						
						
						this.content = [...res.data.map(item=>{
							
							if(Number(this.noticeId) === item.id){
								// 时间加工
								item.createTime = item.createTime.split(" ")
								item.createTime = item.createTime[0]
								item.createTime = item.createTime.split("-")
								this.createTime = item.createTime[0] + "年" + item.createTime[1] + "月" + item.createTime[2] + "日"
								
								// 图片加工
								this.photo = this.myimgurl() + item.photo    
								
								this.img = item.img.split(",")
								
								for(let i=0; i<this.img.length; i++){
									this.img[i] = this.myimgurl() + this.img[i]
								}
								
								this.title = item.title
								
								this.label = item.label
								
								this.body = item.body
								
								
							}
							
							return item
						
						})]
						console.log("this.content: ", this.content)
					}
				})
			},

		}
	}
</script>

<style lang="scss" scoped>
	button::after {
		border: none;
		background: transparent;
	}

	uni-button {
		background: transparent;
	}

	.container {
		background-color: #f2f2f2;
		width: 750rpx;

	}

	.solid {
		border-radius: 50rpx;
		text-indent: 12rpx;
	}

	image {
		width: 750rpx;
	}

	.bottomBox {
		width: 750rpx;
		position: fixed;
		left: 0;
		bottom: 0rpx;
	}
	
	.myflex_1 {
		position: relative;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	
	.myflex_2 {
		display:flex;
		position: relative;
		// background-color: #ffffff;
		flex-wrap: wrap;
	}
	
	
	/* 标签内容 start*/
	.tn-tag-content {
	  &__item {
	    display: inline-block;
	    line-height: 35rpx;
	    padding: 5rpx 25rpx;
	
	    &--prefix {
	      padding-right: 10rpx;
	    }
	  }
	}
	
	
	
	/* 图标容器15 start */
	.icon15 {
	  &__item {
	    width: 30%;
	    background-color: #FFFFFF;
	    border-radius: 10rpx;
	    padding: 30rpx;
	    margin: 20rpx 10rpx;
	    transform: scale(1);
	    transition: transform 0.3s linear;
	    transform-origin: center center;
	    
	    &--icon {
	      width: 100rpx;
	      height: 100rpx;
	      font-size: 60rpx;
	      border-radius: 50%;
	      margin-bottom: 18rpx;
	      position: relative;
	      z-index: 1;
	      
	      &::after {
	        content: " ";
	        position: absolute;
	        z-index: -1;
	        width: 100%;
	        height: 100%;
	        left: 0;
	        bottom: 0;
	        border-radius: inherit;
	        opacity: 1;
	        transform: scale(1, 1);
	        background-size: 100% 100%;
	
	          
	      }
	    }
	  }
	}
	
	.mystyle_1 {
		position: relative;
		display: flex;
		align-items: center;
	}
	
	.mystyle_2 {
		position: relative;
		display: flex;
		background-color: #ffffff;
		justify-content: space-between;
		align-items: center;
	}
	
	
	.mybody {
		white-space: pre-wrap; 
	}
	
	.safe-bottom {
		height: 200rpx;
	}
	
</style>
